Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic medical emergency page #16

Merged
merged 10 commits into from
Feb 26, 2024
Merged

Dynamic medical emergency page #16

merged 10 commits into from
Feb 26, 2024

Conversation

r800360
Copy link
Member

@r800360 r800360 commented Feb 16, 2024

Tracking Info

Resolves #9

Changes

Changed conditions section from static rendering of documents to dynamic rendering which relies on pulling IDs from the backend database to retrieve the documents and displaying them on your device screen.

Currently, a dummy home screen is used to trigger any changes

Update from Meeting 2-15: Recursive rendering has been implemented meaning that headers, subheaders, subsubheaders, etc. and associated plaintext strings or bulleted string lists (as specified by user headers) are rendered.

Testing and Confirmation of Change

In order to test this code, be sure to follow pre-setup:

  1. Backend has the .env file that connects to the database and npm install followed by npm start have been utilized
  2. Use the following .env file set to reference documents from RohanTest database:
PORT=3001
# MONGODB_URI="mongodb://127.0.0.1:27017/todoList"
# FRONTEND_ORIGIN="http://localhost:3000"
DATABASE_URL=mongodb+srv://[DM Anthony or Eshaan or Rohan for this part if you don't have DB URL].mongodb.net/RohanTest?retryWrites=true&w=majority
  1. You have inserted your ip address into the designated part of requests.ts (search "note to reviewers"). Make sure to use ipconfig for Windows or ifconfig for Mac/Linux.
    image
    So in this case, I would insert 100.112.104.53 in the designated place after the http:// part and before the :3001 part
  2. The device that you are executing code from and the device you are testing from are on the same Wifi network
  3. You have run npm install and npx expo start in the frontend folder
  4. Without following step 2, documents will not be retrievable which will likely cause an error
  5. Without following steps 3 and 4, you will likely hit a network error

Steps for Testing:

  1. Scan QR Code on Expo
  2. Code is currently set to first test case as discussed in HomeScreen.tsx. Press "Navigate to Conditions Section" and play around with it.
  3. Switch test cases by changing ID variable according to comments in dummy HomeScreen.tsx and saving your code
  4. Make sure to navigate back and press "Navigate to Conditions Section" to trigger the update.
  5. If you have mongodb compass access, there is a good interface for adding more documents to RohanTest db, so you can make more test cases and add them in if you want - be sure to follow the schema format. If the test case demonstrates an important area of improvement that isn't discussed below, be sure to commit and push the test.

Testing Screenshots:
Currently, the feature seems to be working relatively well on Android phone and iPad as shown in the screenshots below.

IMG_8501
IMG_8502
Screenshot_20240215_201650_Expo Go
Screenshot_20240215_201659_Expo Go
Screenshot_20240215_201712_Expo Go
Screenshot_20240215_201816_Expo Go
Screenshot_20240215_201823_Expo Go
Screenshot_20240215_201840_Expo Go
Screenshot_20240215_201843_Expo Go
Screenshot_20240215_201859_Expo Go
Screenshot_20240215_201902_Expo Go

TODO: Points of Improvement
Dummy home page needs to be replaced by global search page
Fix styling space by adding padding below
There is some extra spacing below the title and above the first header that needs to be resolved
Potential resultant linter or package issues that may arise

Feel free to add commits and push as necessary

DM Anthony, Eshaan, or Rohan with questions

r800360 and others added 3 commits February 14, 2024 00:37
…Screen after pressing 'Navigate to ConditionsSection'; must have device connected on same network and use ipconfig or ifconfig to put IP address in requests.ts const API_BASE_URL otherwise network error is received
@Anthonyp0329 Anthonyp0329 requested review from a team, sydneywb, LillianHo5, shreyagupta112 and meganleongg and removed request for a team, sydneywb and shreyagupta112 February 16, 2024 18:08
Copy link
Collaborator

@Anthonyp0329 Anthonyp0329 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work guys! Just a few changes I commented about - let me know if you have any clarifying questions.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to keep this file for later use, but this shouldn't be the responsibility of the ConditionsSection

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great overall, make sure to get rid of any commented code. Also, note that the Condiitons Section will be showing data that is fetched from the device's storage, not from the MongoDB database. So for the scope of this pull request, just don't worry about fetching the data, and just make the data be passed in as a prop to the component. In the future, we will have a dedicated file that fetches the correct data for a specific emergency/condition, and passes it into the Conditions Section component

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

However, the progress you have made on emergencies.ts and the fetching will be useful later, especially for admin mode stuff, so great work and feel free to keep this! Just make sure the ConditionsSection.tsx only focuses on showing data that is passed in.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes as discussed here have been addressed with the commits below by having ConditionsSection take in an Emergency as input as opposed to an id. Tests have been reconfigured accordingly.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

get rid of this empty file

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

File has been deleted in a commit below.

eshaan-s18 and others added 4 commits February 20, 2024 21:12
…. Fixed test cases in dummy HomeScreen.tsx to reflect this. Removed awkward vertical spacings in ConditionsSection styling.
@r800360 r800360 requested a review from Anthonyp0329 February 21, 2024 23:02
Copy link
Contributor

@meganleongg meganleongg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Besides for the commented code, it looks good to me. Great work!

Copy link
Contributor

@LillianHo5 LillianHo5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside from the feedback Anthony gave, this looks good to me!

Copy link
Collaborator

@Anthonyp0329 Anthonyp0329 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to go! Just make sure to remove your changes to App.tsx for now

@r800360 r800360 merged commit 544cc09 into main Feb 26, 2024
2 checks passed
@r800360 r800360 deleted the DynamicMedicalEmergencyPage branch February 26, 2024 18:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Medical Emergency Page Continuation
5 participants